<template>
  <el-dialog draggable overflow v-model="showCheckTips" title="对码检索" width="85%" align-center>
    <template #footer>
      <div v-loading="loading">
        <div style="display: flex; align-items: center; margin-top: -25px; margin-bottom: 10px">
          <div style="" class="queryDivClass">
            <div class="inputLeftClass" style="border-left: none">
              <span>检索码</span>
            </div>
            <el-input
              size="small"
              v-model="requestEntity.mldm"
              @keydown.enter="getList('reset')"
              style="width: 220px"
              clearable
              placeholder="关键字"
            />
          </div>

          <el-button
            size="small"
            type="primary"
            @click="getList('reset')"
            style="margin-left: 5px"
            icon="Search"
            >查 询
          </el-button>
          <div
            style="
              display: flex;
              font-size: 14px;
              margin-top: auto;
              margin-left: 10px;
              font-weight: bold;
              color: #000000;
            "
          >
            <span style="">
              当前对码：
              <!--{{hisVo.parentVo['key1'].label}}：-->
              {{ hisVo.parentVo['key1'].value }}</span
            >
            <span style="margin-left: 15px">
              <!--{{hisVo.parentVo['key2'].label}}：-->
              {{ hisVo.parentVo['key2'].value }}</span
            >
            <span style="margin-left: 15px">
              <!--{{hisVo.parentVo['key3'].label}}：-->
              {{ hisVo.parentVo['key3'].value }}</span
            >
          </div>
          <div style="display: flex; align-items: center; margin-left: auto">
            <el-button size="small" type="primary" icon="Check" @click="openSaveCode"
              >确 定</el-button
            >
            <el-button size="small" type="danger" icon="Close" @click="showCheckTips = false"
              >取 消</el-button
            >
          </div>
        </div>
        <div>
          <el-table
            class="tableClass"
            style="width: 100%"
            size="small"
            :stripe="true"
            border
            :data="tableList.list"
            height="500"
            highlight-current-row
            @current-change="selectCurrentChange($event)"
            @row-dblclick="rowAbclick"
            ref="tableRef"
          >
            <el-table-column
              v-if="isNotEmpty(tableList.list)"
              type="index"
              width="35"
              align="center"
            />
            <el-table-column
              v-for="(column, columnIndex) in tableList.columnList"
              :prop="column.prop"
              :label="column.label"
              :min-width="column.width"
              header-align="center"
              align="center"
              show-overflow-tooltip
            >
            </el-table-column>
          </el-table>
        </div>

        <div
          style="
            margin-top: 5px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            justify-content: space-between;
          "
        >
          <el-pagination
            v-model:current-page="requestEntity.pageNumber"
            v-model:page-size="requestEntity.pageSize"
            :page-sizes="[20, 30, 40, 50]"
            :size="'small'"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableList.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { isBlank, isNotBlank, isNotEmpty } from '@utils/util'
import { getCodeList, saveTydm } from '@api'
import { ElMessage } from 'element-plus'
const props = defineProps({
  dtoEntity: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['getList'])
const saveVo = ref({} as any)
const hisVo = ref({} as any)
const showCheckTips = ref(false)
const loading = ref(false)
const tableList = ref({
  columnList: [] as any[],
  list: [] as any[],
  total: 0 as number
})
const requestEntity = ref({
  key: [],
  mldm: '',
  fldm: '',
  jgid: '',
  pageNumber: 1,
  pageSize: 20
} as any)
const userInfo = ref({} as any)
const openCheckTips = (row: any, currentUserInfo: any) => {
  // console.log('row222', JSON.stringify(row))
  // 暂存父数据的药品/卫材等数据，等待对码，对码保存时需要用到这个数据主键id
  Object.assign(hisVo.value, row)

  requestEntity.value.fldm = row.fldm
  requestEntity.value.mldm = row.mldm

  Object.assign(userInfo.value, currentUserInfo)

  getList(null)

  showCheckTips.value = true
}
const selectCurrentChange = (row: any) => {
  loading.value = true
  // console.log('selectCurrentChange', JSON.stringify(row))
  // 如果上次弹窗中选中了某条数据，第二次打开会默认调用一次选择方法，但是第二次调用没数据 所以得判断以下
  if (isNotBlank(row?.mldm)) {
    Object.assign(saveVo.value, row)
  }

  loading.value = false
}
const rowAbclick = async (row: any) => {
  await selectCurrentChange(row)

  await openSaveCode()
}
const openSaveCode = () => {
  if (isBlank(saveVo.value.fldm)) {
    return ElMessage.error('请选择一条数据')
  }

  if (isBlank(userInfo.value.jgid)) {
    return ElMessage.error('机构id为空')
  }
  saveCode({
    jgid: userInfo.value.jgid,
    fldm: saveVo.value.fldm,
    his_id: hisVo.value.id,
    his_mc: hisVo.value.mc,
    mldm: saveVo.value.mldm,
    mlmc: saveVo.value.mlmc,
    beiz: '',
    cjrid: userInfo.value.rid || userInfo.value.zhid,
    cjrxm: userInfo.value.rxm || userInfo.value.zh
    // cjsj: null,
  })
}
const saveCode = (saveEntity: any) => {
  loading.value = true
  saveTydm({ data: saveEntity }).then((res) => {
    if (res.code === 1) {
      emits('getList', null)
      setTimeout(() => {
        showCheckTips.value = false
      }, 100)
    }
    loading.value = false
  })
}

const getList = async (query: any) => {
  loading.value = true
  // 药品分类类型根据tab同步
  if (query) {
    // 如果点击的查询，要把分页重置成默认值
    requestEntity.value.pageNumber = 1
    requestEntity.value.pageSize = 20
  }
  if (isNotBlank(requestEntity.value.mldm)) {
    requestEntity.value.key = requestEntity.value.mldm.split(' ')
  }
  requestEntity.value.jgid = userInfo.value.jgid
  let codeListRes: any = await getCodeList({ data: requestEntity.value })
  if (codeListRes.code === 1) {
    tableList.value = codeListRes.data
    loading.value = false
  }
}
const handleSizeChange = (val: number) => {
  requestEntity.value.pageSize = val
  getList(null)
}
const handleCurrentChange = (val: number) => {
  requestEntity.value.pageNumber = val
  getList(null)
}

onMounted(async () => {})
defineExpose({
  openCheckTips,
  saveCode
})
</script>

<style scoped lang="scss">
.queryDivClass {
  display: flex;
  align-items: center;
  color: #666666;
  font-size: 11px;
  border: 1px solid #dcdfe6;

  :deep(.el-input) {
    --el-input-focus-border-color: #409eff; // 选中时的颜色
    //--el-input-hover-border-color: #dedfe0;// 鼠标聚焦时的颜色
    --el-input-border-color: #ffffff; // 默认颜色白色，相当于隐藏了边框
  }

  :deep(.el-input--small .el-input__wrapper) {
    padding: 1px 4px;
  }

  :deep(.el-select__wrapper) {
    box-shadow: 0 0 0 1px #ffffff inset;
  }

  :deep(.el-select__wrapper.is-focused) {
    box-shadow: 0 0 0 1px #409eff inset;
  }

  :deep(.el-date-editor.el-input__wrapper) {
    box-shadow: 0 0 0 1px #ffffff inset;
  }

  :deep(.el-range-editor.is-active:hover) {
    box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;
  }

  :deep(.el-range-editor.is-active) {
    box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;
  }
}

.inputLeftClass {
  background-color: #f2f3f5;
  border-right: 1px solid #dcdfe6;
  border-left: 1px solid #dcdfe6;
  height: 24px;
  width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tableClass {
  user-select: text;
  -webkit-user-select: text; // 2个效果一样都是为了让能复制文本，-webkit-user-select 这个是为了兼容旧的浏览器
  --el-table-current-row-bg-color: #d1edc4 !important; // 选中的默认蓝色

  :deep(.el-table__body tr:hover > td) {
    background-color: #d9ecff !important;
  }

  :deep(.el-table__body) {
    color: #000000;
    cursor: text;
  }
}
</style>
